<!--<html>-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>简单时长倒计时</title>-->
<!--    <SCRIPT type="text/javascript">-->
<!--        var maxtime = 60 * 60; //一个小时，按秒计算，自己调整!-->
<!--        function CountDown() {-->
<!--            if (maxtime >= 0) {-->
<!--                minutes = Math.floor(maxtime / 60);-->
<!--                seconds = Math.floor(maxtime % 60);-->
<!--                msg = "距离结束还有" + minutes + "分" + seconds + "秒";-->
<!--                document.all["timer"].innerHTML = msg;-->
<!--                if (maxtime == 5 * 60) alert("还剩5分钟");-->
<!--                &#45;&#45;maxtime;-->
<!--            } else {-->
<!--                clearInterval(timer);-->
<!--                alert("时间到，结束!");-->
<!--            }-->
<!--        }-->

<!--        timer = setInterval("CountDown()", 1000);-->
<!--    </SCRIPT>-->
<!--</head>-->
<!--<body>-->
<!--<div id="timer" style="color:red"></div>-->
<!--<div id="warring" style="color:red"></div>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>触摸滑屏</title>
    <style>
        html,body,h2 {
            margin: 0;
            padding: 0;
        }
        html,body,#wraper,#content {
            width: 100%;
            height: 100%;
        }
        #wraper {
            overflow: hidden;
        }
        #content {
            transition: all 1s linear;
        }
        .page {
            width: 100%;
            height: 100%;
        }
        #page1 {
            background: #f00
        }
        #page2 {
            background: #0f0
        }
        #page3 {
            background: #00f
        }
    </style>
</head>
<body>
<div id="wraper">
    <div id="content">
        <div class="page" id="page1">
            page1
        </div>
        <div class="page" id="page2">
            page2
        </div>
        <div class="page" id="page3">
            page3
        </div>
    </div>
</div>
<script>
    var page1 = document.getElementById('page1'),        //滑动item
        page2 = document.getElementById('page2'),
        page3 = document.getElementById('page3'),
        wraper = document.getElementById('wraper'),
        content = document.getElementById('content');    //滑动容器
    var itemHeight = wraper.offsetHeight;                //滑动item高度
    var index = 0;                                       //滑动计数
    var moveY,                                           //滑动距离
        endY,                                            //滑动停止的Y坐标
        startY;                                          //滑动开始的Y坐标
    // content.style.height = (itemHeight * 3) + 'px'
    // 触摸开始
    function boxTouchStart(e) {
        console.log(e)
        var touch = e.touches[0];
        startY = touch.pageY;
        endY = content.style.webkitTransform;
        if(!endY){
            endY = 0;
        }else{
            endY = parseInt(endY.replace('translateY(',''))
        }
    }

    // 触摸结束
    function boxTouchEnd(e) {
        console.log(e)
    }
    // 触摸移动
    function boxTouchMove(e) {
        var touch = e.touches[0];
        moveY = touch.pageY - startY;
        index = Number(e.target.id.split('page')[1])

        //下一页
        if(moveY < 0) {
            if(index == 3) {
                return false;
            }
            content.style.webkitTransform = 'translateY(-'+(itemHeight*index)+'px)'
        }
        //上一页
        else if(moveY > 0) {
            if(index == 1) {
                return false;
            }
            content.style.webkitTransform = 'translateY('+(itemHeight+endY)+'px)'
        }

    }
    content.addEventListener('touchstart', boxTouchStart, false )
    content.addEventListener('touchmove', boxTouchMove, false)
    content.addEventListener('touchend', boxTouchEnd, false)

</script>
</body>
</html>